<template>
  <div class="bigbox">
    <!-- <div class="select">

    </div> -->
    <div class="topbox">
      <div class="little">
        <div style="display: flex;justify-content: space-between;">
          <div style="width: 80%;">
            <el-dropdown @command="handleCommand" trigger="click">
            <span class="el-dropdown-link" style="cursor: pointer;font-size: 18px;color: rgba(50, 50, 50, 1);">
              <span class="classname">{{ buildingName }}</span><i class="iconfont icon-zhankaicaidan"></i>
            </span>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item v-for="(item,index) in qiyelist" :key="index" :command="item.id" class="option">{{ item.name }}</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
          </div>
          <div>
            <div class="text">已开户</div>
            <div class="number">{{ gaikuangobj.openAccountNumber?gaikuangobj.openAccountNumber:0}}</div>
          </div>
        </div>
        <div ref="yikaihu" style="height: 40%;padding-top: 10px;">
          <img style="width: 100%;" src="../../../../assets/Prepaid/overview/block-pic-2.png" alt="">       
        </div>
        <div class="foot">
          <div class="laa">用户数：{{ gaikuangobj.totalCustomerNumber }}(户)</div>
          <div class="laa">未开户：{{ gaikuangobj.unOpenAccountNumber }}(户)</div>
        </div>
      </div>
      <div class="little">
        <div class="text">入住率</div>
        <div class="number">{{ (+gaikuangobj.inRoomRate)?.toFixed(2) }}%</div>
        <div ref="ruzhulv" style="height: 40%;padding-top: 10px;">
          <img style="width: 100%;" src="../../../../assets/Prepaid/overview/block-pic-1.png" alt="">
        </div>
        <div class="foot">
          <div class="laa">总房间数：{{ gaikuangobj.totalRoomNumber }}(间)</div>
          <div class="laa">已入住房间：{{ gaikuangobj.inRoomNumber }}(间)</div>
        </div>
      </div>
      <div class="little">
        <div class="text">告警率</div>
        <div class="number">{{ (+gaikuangobj.alarmRate)?.toFixed(2) }}%</div>
        <div ref="gaojinglv" style="height: 40%;"></div>
        <div class="foot">
          <div class="laa">用户数：{{ gaikuangobj.totalCustomerNumber }}(户)</div>
          <div class="laa" style="cursor: pointer;" @click="togaojing">告警用户：{{ gaikuangobj.alarmCustomerNumber }}(户)</div>
        </div>
      </div>
      <div class="little">
        <div class="text">欠费率</div>
        <div class="number">{{ (+gaikuangobj.overdueRate)?.toFixed(2) }}%</div>
        <div ref="qianfeilv" style="height: 40%;"></div>
        <div class="foot">
          <div class="laa">用户数：{{ gaikuangobj.totalCustomerNumber }}(户)</div>
          <div class="laa" style="cursor: pointer;" @click="toqianfei">欠费用户：{{ gaikuangobj.overdueCustomerNumber }}(户)</div>
        </div>
      </div>
    </div>
    <div class="bodyer">
     <!-- 表计状态-->
      <div class="three">
        <div class="cdcdcc">
          <div class="zhuangtai">表计状态</div>
          <div>
            <el-radio-group v-model="radiobiaoji" size="mini" class="custom-radio-group" @change="changebiaoji">
              <el-radio-button label="电"></el-radio-button>
              <el-radio-button label="水"></el-radio-button>
              <el-radio-button label="气"></el-radio-button>
            </el-radio-group>
          </div>
        </div>
        <div style="padding-left: 20px;">
          <div class="topthree" style="margin: 30px 0 40px 0;">
            <div class="fang">
              <div><img src="../../../../assets/Prepaid/overview/index-wkh.png" alt=""></div>
              <div>
                <div class="sixfour">未开户</div>
                <div><span class="blue">{{ metersyayus.unOpenNumber }}</span><span class="sixyier">/{{ metersyayus.totalNumber }}</span></div>
              </div>
            </div>
            <div class="fang">
              <div><img src="../../../../assets/Prepaid/overview/index-cbcg.png" alt=""></div>
              <div>
                <div class="sixfour">抄表成功</div>
                <div><span class="blue">{{ metersyayus.readSuccessNumber }}</span><span class="sixyier">/{{ metersyayus.totalNumber }}</span></div>
              </div>
            </div>
            <div class="fang">
              <div><img src="../../../../assets/Prepaid/overview/index-hz.png" alt=""></div>
              <div>
                <div class="sixfour">合闸</div>
                <div><span class="blue">{{ metersyayus.openNumber }}</span><span class="sixyier">/{{ metersyayus.totalNumber }}</span></div>
              </div>
            </div>
          </div>
          <div class="topthree">
            <div class="fang">
              <div><img src="../../../../assets/Prepaid/overview/index-fz.png" alt=""></div>
              <div>
                <div class="sixfour">分闸</div>
                <div><span class="blue">{{ metersyayus.closeNumber }}</span><span class="sixyier">/{{ metersyayus.totalNumber }}</span></div>
              </div>
            </div>
            <div class="fang">
              <div><img src="../../../../assets/Prepaid/overview/index-bsd.png" alt=""></div>
              <div>
                <div class="sixfour">保{{radiobiaoji}}</div>
                <div><span class="blue">{{ metersyayus.powerProtectNumber }}</span><span class="sixyier">/{{ metersyayus.totalNumber }}</span></div>
              </div>
            </div>
            <div class="fang" v-show="radiobiaoji=='电'">
              <div><img src="../../../../assets/Prepaid/overview/index-glcyz.png" alt=""></div>
              <div>
                <div class="sixfour">功率超阈值</div>
                <div><span class="blue">{{ metersyayus.powerOverNumber }}</span><span class="sixyier">/{{ metersyayus.totalNumber }}</span></div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <!-- 充值情况 -->
      <div class="three">
        <div class="cdcdcc">
          <div class="zhuangtai">充值情况</div>
        </div>
        <div class="chongzhi" ref="chongzhi"></div>
      </div>
      <!-- 收费情况 -->
      <div class="three">
        <div class="cdcdcc">
          <div class="zhuangtai">收费情况</div>
          <div>
            <el-radio-group v-model="radioshoufei" size="mini" class="custom-radio-group" @change=changeshoufei>
              <el-radio-button label="日"></el-radio-button>
              <el-radio-button label="月"></el-radio-button>
              <el-radio-button label="年"></el-radio-button>
            </el-radio-group>
          </div>
        </div>
        <div class="shoufei">
          <div class="dis">
            <div class="bluck">{{ radioshoufei=='日'?'今日':radioshoufei=='月'?'本月':'今年' }}用电量(kWh)</div>
            <div class="bluck">{{ radioshoufei=='日'?'今日':radioshoufei=='月'?'本月':'今年' }}电费(元)</div>
          </div>
          <div class="dis topandb">
            <div class="blue">{{ shoufeiobj.thisUsage?shoufeiobj.thisUsage:0 }}</div>
            <div class="blue">{{ shoufeiobj.thisFee?shoufeiobj.thisFee:0 }}</div>
          </div>
          <div class="dis">
            <div class="bluck">{{ radioshoufei=='日'?'昨日':radioshoufei=='月'?'上月':'去年' }}用电量(kWh): <span class="fontw">{{ shoufeiobj.lastUsage?shoufeiobj.lastUsage:0 }}</span></div>
            <div class="bluck">{{ radioshoufei=='日'?'昨日':radioshoufei=='月'?'上月':'去年' }}电费(元): <span class="fontw">{{ shoufeiobj.lastFee?shoufeiobj.lastFee:0 }}</span></div>
          </div>
          <div class="dis">
            <div class="bluck">
              同比: <span :style="{color:+shoufeiobj.usageTrend>0?'red':+shoufeiobj.usageTrend<0?'#3dcc85':'#000000D9'}">
                {{ shoufeiobj.usageTrend?shoufeiobj.usageTrend:0 }}% 
              <i v-if="+shoufeiobj.usageTrend>0" class="el-icon-caret-top"></i>
              <i v-else-if="+shoufeiobj.usageTrend<0" class="el-icon-caret-bottom"></i>
              <span v-else>-</span>
              </span>
            </div>
            <div class="bluck">
              同比: <span :style="{color:+shoufeiobj.feeTrend>0?'red':+shoufeiobj.feeTrend<0?'#3dcc85':'#000000D9'}">
                {{ shoufeiobj.feeTrend?shoufeiobj.feeTrend:0 }}%
              <i v-if="+shoufeiobj.feeTrend>0" class="el-icon-caret-top"></i>
              <i v-else-if="+shoufeiobj.feeTrend<0" class="el-icon-caret-bottom"></i>
              <span v-else>-</span>
              </span>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="footer">
      <!-- 能耗情况 -->
      <div class="twobox">
        <div class="haoneng">
          <div class="fantwite">耗能情况</div>
          <div>
            <el-radio-group v-model="radiohaoneng" size="mini" class="custom-radio-group" @change="changehaonegn">
              <el-radio-button  label="电"></el-radio-button>
              <el-radio-button  label="水"></el-radio-button>
              <el-radio-button  label="气"></el-radio-button>
            </el-radio-group>
          </div>
        </div>
        <div class="nenghao" ref="nenghaoqingkuang"></div>
      </div>
      <!-- 离线设备 -->
      <div class="onebox">
        <div class="butto fantwite">设备工况</div>
        <div style="height: 93%;">
          <TableColumn ref="TableColumn" :tableConfig="tableConfig"
           :tableData="tableData">
           <el-table-column label="状态" align="center" width="70">
            <template #default="{row}">
              <span v-show="row.state=='在线'"><span class="readus zai"></span>{{ row.state }}</span>
              <span v-show="row.state=='离线'"><span class="readus lixian"></span>{{ row.state }}</span>
            </template>
          </el-table-column>
          </TableColumn>
        </div>
      </div>
    </div>
    <DialogList ref="DialogListrefs" :buildingId="buildingId"></DialogList>
    <DialogQianfei ref="DialogQianfeirefs" :buildingId="buildingId"></DialogQianfei>
  </div>
</template>

<script>
import DialogQianfei from './dialogqianfei.vue'
import DialogList from './dialoglist.vue'
import {getloginlistapi} from '@/api/prwpaid/file-management/Architectural-complex'
import TableColumn from '@/components/Table/index.vue'
import * as echarts from 'echarts';
import {getlixianlistapi,getnenghaolistapi,getmetersttusapi,getgaikuangapi,getyongfeiandliangapi} from '@/api/prwpaid/summarize/overview'
export default {
  name: 'CallPoliceIndex',
  components: {
    DialogList,
    TableColumn,
    DialogQianfei
},
  data() {
    return {
      buildingId:'',
      value1:'',
      buildingName:'',
      radiobiaoji: '电',
      radioshoufei: '日',
      radiohaoneng: '电',
      qiyelist:[],
      tableData: [],
      tableConfig: [
        { label: '名称', prop: 'name',width:'110' },
        { label: 'ID', prop: 'id',width:'110'  },
        { label: '建筑群', prop: 'buildingName' },
      ],
      metersyayus:{},
      gaikuangobj:{},
      shoufeiobj:{}
    };
  },

  async mounted() {
    this.gettime()
    const res = await getloginlistapi()
    this.qiyelist = res.data.list
    this.buildingId=res.data.list[0].id
    this.handleCommand(res.data.list[0].id)
  },

  methods: {

    // 下拉菜单点击
    handleCommand(val) {
      this.buildingName = this.qiyelist.filter(ele => ele.id == val)[0].name
      this.buildingId=val
      // 获取能耗情况
      this.getnenghao(val)
      // 获取离线设备
      this.getlixianshebei(val)
      // 获取表计状态
      this.getmeterstatu(val)
      // 获取概况信息
      this.getgaikuang(val)
      // 获取收费情况
      this.getshoufeiqing(val)
    },
    // 获取收费情况
    async getshoufeiqing(id) {
      const {data:{entity}} = await getyongfeiandliangapi({ buildingId: id, energyType: 'ELEC', timeType: this.radioshoufei == '日' ? '1' : this.radioshoufei == '月' ? '2' : '3' })
      this.shoufeiobj=entity
    },
    // 收费情况年月日选择
    changeshoufei(){
      this.getshoufeiqing(this.buildingId)
    },
    // 获取概况信息
    async getgaikuang(id) {
      try {
        const { data: { entity } } = await getgaikuangapi({ buildingId: id })
        this.gaikuangobj=entity
      } catch (error) {
        this.gaikuangobj={}
      }
      // 充值情况图表
      this.getchongzhi()
      // 告警情况图表
      this.getgaojinglv()
      // 欠费情况图表
      this.getqianfeilv()
    },
    // 获取表计状态
    async getmeterstatu(id) {
      const {data:{entity}} = await getmetersttusapi({ buildingId: id, energyType: this.radiobiaoji == '电' ? 'ELEC' : this.radiobiaoji == '水' ? 'WATER' : 'qi' })
      this.metersyayus=entity
    },
    // 表计状态水电气选择
    changebiaoji() {
      this.getmeterstatu(this.buildingId)
    },
    // 获取能耗情况
    async getnenghao(id) {
      const {data:{list}} = await getnenghaolistapi({
        buildingId: id, month: this.value1,
        energyType: this.radiohaoneng == '电'?'ELEC':this.radiohaoneng == '水'?'WATER':'qi'
      })
      this.getnenghaopai(list)
    },
    // 耗能情况下拉
    changehaonegn() {
      this.getnenghao(this.buildingId)
    },
    // 获取离线设备
    async getlixianshebei(id) {
      this.$refs.TableColumn.loading=true
      const { data: { list } } = await getlixianlistapi({ buildingId: id })
      this.tableData=list
      this.$refs.TableColumn.loading=false
    },
   // 获取当前时间戳
    gettime() {
      const date = new Date()
      const year = date.getFullYear() // 年
      const mon = date.getMonth() + 1 // 月
      const month=mon<10?'0'+mon:mon
      this.value1=year+'-'+month
    },
    togaojing() {
      this.$refs.DialogListrefs.dialogVisible=true
      this.$refs.DialogListrefs.gettablelist()
    },
    toqianfei() {
      this.$refs.DialogQianfeirefs.dialogVisible = true
      this.$refs.DialogQianfeirefs.gettablelist()
    },
    // 获取充值情况
    getchongzhi() {
      var chartDom = this.$refs.chongzhi
      var myChart = echarts.init(chartDom);
      var option;
      const { alipayRechargeAmount, offlineRechargeAmount, weChatRechargeAmount,unionPayRechargeAmount, ...otherData } = this.gaikuangobj;
     // 将对象的值存入数组，并将null转换为0
        const valuesArray = [offlineRechargeAmount, weChatRechargeAmount ,alipayRechargeAmount,unionPayRechargeAmount]
          .map(value => value === 'null' ? 0 : +value)
        const maxvalue=Math.max(...valuesArray)
      var salvProName = ['线下', '微信',  '支付宝','银联'];
      var salvProValue = valuesArray;
      option = {
          grid: {
              left: '2%',
              right: '5%',
              bottom: '0%',
              top: '2%',
              containLabel: true,
          },
          tooltip: {
              trigger: 'axis',
              axisPointer: {
                  type: 'none',
              },
              formatter: function (params) {
                  return params[0].name + ' : ' + params[0].value;
              },
          },
          xAxis: {
              show: false,
              type: 'value',
              // max: salvProMax,
          },
          yAxis: [
              {
                  type: 'category',
                  inverse: true,
                  axisLabel: {
                      show: true,
                      textStyle: {
                          color: '#000',
                      },
                  },
                  splitLine: {
                      show: false,
                  },
                  axisTick: {
                      show: false,
                  },
                  axisLine: {
                      show: false,
                  },
                  data: salvProName,
              },
              {
                  type: 'category',
                  inverse: true,
                  axisTick: 'none',
                  axisLine: 'none',
                  show: true, // 显示右侧的文字
                  axisLabel: {
                      formatter: '{value}(元)',
                      textStyle: {
                          color: '#818181',
                          fontSize: '12',
                      },
                  },
                  data: salvProValue,
              },
          ],
          series: [
              {
                  name: '蓝色进度条',
                  type: 'bar',
                  hoverAnimation: false,
                  zlevel: 1,
                  itemStyle: {
                      normal: {
                          barBorderRadius: [0,8,8,0],
                          color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
                              {
                                  offset: 0,
                                  color: '#aed1f1',
                              },
                              {
                                  offset: 1,
                                  color: '#1f93fe',
                              },
                          ]),
                      },
                  },
                  barWidth: 16,
                  data: salvProValue,
                
              },
              {
                  name: '背景',
                  type: 'bar',
                  hoverAnimation: false,
                  barWidth: 16,
                  barGap: '-100%',
                  data: salvProValue.map((item) => {
                      return maxvalue?maxvalue:100;
                  }),
                  itemStyle: {
                      normal: {
                          color: '#f1f1f1',
                          barBorderRadius: [0,8,8,0],
                      },
                  },
                  // label:{
                  //     distance: 10,
                  // }
              },
          ],
      };
      option && myChart.setOption(option);
      window.addEventListener("resize", () => {
    //图表响应处理
        myChart.resize();
      });
    },
    // 获取告警率图表
    getgaojinglv() {
      var chartDom = this.$refs.gaojinglv
      var myChart = echarts.init(chartDom);
      var option;

      option = {
        backgroundColor: '#fff',
        tooltip: {
          trigger: 'axis'
        },
    grid: {
        top: 0,
        bottom: 0,
        left: '1%',
        right: '1%',
    },
    xAxis: {
        show: false,
        type: 'value',
        boundaryGap: [0, 0],
    },
    yAxis: [
        {
            type: 'category',
            data: [''],
            axisLine: { show: false },
            axisTick: [
                {
                    show: false,
                },
            ],
        },
    ],
    series: [
        {
            name: '告警用户',
            type: 'bar',
            zlevel: 1,
            itemStyle: {
                normal: {
                    barBorderRadius: 30,
                    color: new echarts.graphic.LinearGradient(1, 0, 0, 1, [
                        {
                            offset: 1,
                            color: '#f7b2b0',
                           
                        },
                        {
                            offset: 0,
                             color: '#ff5050',
                        },
                    ]),
                },
            },
            barWidth: 15,
            data: [+this.gaikuangobj.alarmCustomerNumber],
        },
        {
            name: '用户数',
            type: 'bar',
            barWidth: 15,
            barGap: '-100%',
            data: [+this.gaikuangobj.totalCustomerNumber],
            itemStyle: {
                normal: {
                    color: '#f1f1f1',
                    borderWidth: 1,
                    // borderColor: '#f1f1f',
                    barBorderRadius: 30,
                },
            },
        },
    ],
};


      option && myChart.setOption(option);
      window.addEventListener("resize", () => {
    //图表响应处理
        myChart.resize();
      });
    },
    // 获取欠费率图表
    getqianfeilv() {
      var chartDom = this.$refs.qianfeilv
      var myChart = echarts.init(chartDom);
      var option;

      option = {
        backgroundColor: '#fff',
        tooltip: {
          trigger: 'axis'
        },
    grid: {
        top: 0,
        bottom: 0,
        left: '1%',
        right: '1%',
    },
    xAxis: {
        show: false,
        type: 'value',
        boundaryGap: [0, 0],
    },
    yAxis: [
        {
            type: 'category',
            data: [''],
            axisLine: { show: false },
            axisTick: [
                {
                    show: false,
                },
            ],
        },
    ],
    series: [
        {
            name: '告警用户',
            type: 'bar',
            zlevel: 1,
            itemStyle: {
                normal: {
                    barBorderRadius: 30,
                    color: new echarts.graphic.LinearGradient(1, 0, 0, 1, [
                        {
                            offset: 1,
                            color: '#f2e5ac',
                           
                        },
                        {
                            offset: 0,
                             color: '#f2d74f',
                        },
                    ]),
                },
            },
            barWidth: 15,
            data: [+this.gaikuangobj.overdueCustomerNumber],
        },
        {
            name: '用户数',
            type: 'bar',
            barWidth: 15,
            barGap: '-100%',
            data: [+this.gaikuangobj.totalCustomerNumber],
            itemStyle: {
                normal: {
                    color: '#f1f1f1',
                    borderWidth: 1,
                    // borderColor: '#f1f1f',
                    barBorderRadius: 30,
                },
            },
        },
    ],
};


      option && myChart.setOption(option);
      window.addEventListener("resize", () => {
    //图表响应处理
        myChart.resize();
      });
    },
    // 获取能耗排名图表
    getnenghaopai(list) {
      var chartDom = this.$refs.nenghaoqingkuang
      var myChart = echarts.init(chartDom);
      var option;
      const array=[]
      const benyuelist=[]
      const shangyuelist=[]
      list.map(ele => {
        if (ele.name == '本月') {
          ele.datalist.map(item => {
            benyuelist.push(item.valueReading)
            array.push(item.timeReading)
          })
        } else if (ele.name == '上月') {
          ele.datalist.map(item => {
            shangyuelist.push(item.valueReading)
          })
        }
       })
      option = {
        grid: {
        top: '10%',
        bottom: '15%',
        left: '7%',
        right: '2%',
    },
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'cross',
      crossStyle: {
        color: '#999'
      }
    }
  },
  legend: {
    right:10,
    data: ['本月', '上月']
  },
  xAxis: [
    {
      type: 'category',
      data: array,
      axisPointer: {
        type: 'shadow'
      }
    }
  ],
  yAxis: [
    {
      type: 'value',
      name:'(kWh)'
      // axisLabel: {
      //   formatter: '{value} '
      // }
    },
  ],
  series: [
    {
      name: '本月',
      type: 'bar',
      itemStyle:{
         color:'#1a90fe'
       },
      data: benyuelist
    },
    {
      name: '上月',
      type: 'bar',
       itemStyle:{
         color:'#23cfc4'
       },
      data: shangyuelist
    },

  ]
};

      option && myChart.setOption(option);
      window.addEventListener("resize", () => {
    //图表响应处理
        myChart.resize();
      });
    }
  },
};
</script>

<style lang="scss" scoped>
*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
.option{
  padding: 0 10px;
}
.bigbox{
  padding: 10px;
  height: 100%;
  .select{
    margin-bottom: 10px;
  }
  .topbox{
    display: flex;
    justify-content: space-between;
    margin-bottom: 10px;
    .little{
      width: 24.5%;
      background-color: #fff;
      height: 180px;
      padding: 15px;
      .classname{
        display: inline-block;
        // width: 90%;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }
      .text{
        font-size: 14px;
        color: #999;
      }
      .number{
        font-size: 30px;
      }
      .foot{
        padding-top: 10px;
        font-size: 14px;
        display: flex;
        border-top: 1px solid #ccc;
        .laa{
          width: 50%;
        }
      }
    }
  }
  .bodyer{
    display: flex;
    justify-content: space-between;
    margin-bottom: 10px;
    .three{
      width: 32.9%;
      height: 240px;
      background-color: #fff;
      padding: 15px;
      .cdcdcc{
        display: flex;
        justify-content: space-between;
        .zhuangtai{
          font-weight: 700;
        }
      }
      .chongzhi{
        height: 90%;
      }
      .shoufei{
        padding: 20px 0;
        .dis{
          display: flex;
          margin-bottom: 15px;
          div{
            width: 50%;
          }
          .bluck{
            color: #000000D9
          }
          .fontw{
            font-weight: 600;
          }
          .blue{
            font-size: 24px;
            color: #1A90FE;
          }
        }
        .topandb{
          margin: 20px 0;
        }
      }
      .topthree{
        display: flex;
        // margin:25px 0;
        .fang{
          display: flex;
          width:33.3%;
          img{
            margin-right: 15px;
          }
          .sixfour{
            font-size: 14px;
            color: #646464;
          }
          .sixyier{
            font-size: 12px;
            color: #646464;
          }
          .blue{
            font-size: 24px;
            color: #1A90FE;
          }
        }
      }
    }
  }
  .footer{
    display: flex;
    justify-content: space-between;
    height: calc(100% - 440px);
    .fantwite{
      font-weight: bold;
      color: #000;
    }
    .twobox{
      // height: 500px;
      height: 100%;
      width: 66.45%;
      background-color: #fff;
      .haoneng{
        display: flex;
        justify-content: space-between;
        padding: 15px;
        margin-bottom: 10px;
      }
      .nenghao{
        height: 80%;
      }
    }
    .onebox{
      // flex: 1;
      width: 32.9%;
      // height: 500px;
      height: 100%;
      background-color: #fff;
      padding: 15px;
      .butto{
        margin-bottom: 10px;
      }
      .readus{
        display: inline-block;
        vertical-align: middle;
        width: 14px;
        height: 14px;
        border-radius: 50%;
        margin-right: 5px;
      }
      .zai{
        background-color: #3dcc6d;
      }
      .lixian{
        background-color: #e74747;
      }
    }
  }
}
.icon-zhankaicaidan{
  margin-left: 15px;
}

::v-deep .progress{
  position: relative;
  ::v-deep .el-progress-bar{
    // padding-left: 50px;
    padding-right: 0;
  }
  ::v-deep .el-progress__text{
    position: absolute;
    left: 0;
  }
}
::v-deep .el-dropdown{
  width: 100%;
}
::v-deep .el-dropdown-link{
  display: inline-block;
  width: 100%;
  display: flex;
  align-items: center;
  padding: 0px !important;
}
</style>